<template>
  <div>

    <!--行内表单    -->
    <el-form :inline="true">
      <el-form-item>
        <el-input
            v-model="searchForm.title"
            placeholder="论文标题"
            clearable
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getThesisList">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveHandle">新增</el-button>
      </el-form-item>
      <el-form-item>
        <el-popconfirm title="确定批量删除吗？" @confirm="delHandle(null)">
          <el-button type="danger" slot="reference" :disabled="delBtlStatu">批量删除</el-button>
        </el-popconfirm>
      </el-form-item>
    </el-form>

    <!--表格-->
    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        border
        stripe
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="40">
      </el-table-column>

      <el-table-column
          prop="number"
          label="编号"
          width="300">
      </el-table-column>
      <el-table-column
          prop="title"
          label="标题"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="authors"
          label="作者"
          width="150"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="publishedTime"
          label="发表时间"
          width="170"
          show-overflow-tooltip>
      </el-table-column>

      <el-table-column
          prop="icon"
          width="170"
          label="操作">

        <template slot-scope="scope">
          <el-button type="text" @click="infoHandle(scope.row.id)">详情</el-button>
          <el-divider direction="vertical"></el-divider>

          <el-button type="text" @click="editHandle(scope.row.id)">编辑</el-button>
          <el-divider direction="vertical"></el-divider>

          <template>
            <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delHandle(scope.row.id)">
              <el-button type="text" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <!--分页导航-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[5, 10, 20, 50]"
        :current-page="current"
        :page-size="size"
        :total="total">
    </el-pagination>

    <!--新增对话框-->
    <el-dialog
        :close-on-click-modal=false
        title=""
        :visible.sync="dialogVisible"
        width="600px"
        :before-close="handleClose"
    >
      <el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="100px" class="demo-editForm">
        <el-form-item label="论文编号" prop="number" label-width="100px">
          <el-input v-model="editForm.number" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="论文标题" prop="title" label-width="100px">
          <el-input v-model="editForm.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="论文作者" prop="authors" label-width="100px">
          <el-input v-model="editForm.authors" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="发表时间" prop="publishedTime" label-width="100px">
          <el-date-picker
              v-model="editForm.publishedTime"
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="摘要" prop="digest" label-width="100px">
          <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入摘要"
              v-model="editForm.digest">
          </el-input>
        </el-form-item>
        <el-alert
            title="正文格式要求"
            type="info"
            description="请输入以class为middlecontent的div，
            如：<div class='middlecontent'>
                div里的内容可以是各种html标签，不要有任何外部的css样式，如有图片需求，请以base64编码表示图片
               </div>"
            show-icon>
        </el-alert>
        <el-form-item label="正文" prop="body" label-width="100px">
          <el-input
              type="textarea"
              :rows="6"
              placeholder="请输入正文"
              v-model="editForm.body">
          </el-input>
        </el-form-item>

        <el-form-item label="被引用数量" prop="citeNumber" label-width="100px">
          <el-input v-model="editForm.citeNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="收藏数量" prop="collectNumber" label-width="100px">
          <el-input v-model="editForm.collectNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="笔记数量" prop="noteNumber" label-width="100px">
          <el-input v-model="editForm.noteNumber" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button v-if="showBtn===true" v type="primary" @click="submitForm()">确定</el-button>
          <el-button v-if="showBtn===true" @click="resetForm('editForm')" >重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "Thesis",
  data() {
    return {
      searchForm: {},
      delBtlStatu: true,
      tableData: [],
      total: 0,
      size: 5,
      current: 1,
      dialogVisible: false,
      editForm: {},
      editFormRules: {
        number: [
          {required: true, message: '请输入论文编号', trigger: 'blur'}
        ],
        title: [
          {required: true, message: '请输入论文标题', trigger: 'blur'}
        ],
        authors: [
          {required: true, message: '请输入论文作者', trigger: 'blur'}
        ],
        publishedTime: [
          {required: true, message: '请输入论文发表时间', trigger: 'blur'}
        ],
        digest: [
          {required: true, message: '请输入论文摘要', trigger: 'blur'}
        ],
        body: [
          {required: true, message: '请输入论文正文', trigger: 'blur'}
        ]
      },
      showBtn: true,
    }
  },
  /*页面创建时*/
  created() {
    this.getThesisList()
  },
  methods: {
    /*分页查询*/
    getThesisList() {
      this.$axios.get("/sys/thesis/list", {
        params: {
          title: this.searchForm.title,
          current: this.current,
          size: this.size
        }
      }).then(res => {
        /*console.log(res)*/
        this.tableData = res.data.data.records
        this.size = res.data.data.size
        this.current = res.data.data.current
        this.total = res.data.data.total
      })
    },
    /*点击新增按钮时*/
    saveHandle(){
      this.showBtn = true;
      this.dialogVisible = true
    },
    /*点击详情按钮时*/
    infoHandle(id){
      this.$axios.get('/sys/thesis/info/' + id).then(res => {
        this.editForm = res.data.data
        this.showBtn = false;
        this.dialogVisible = true
      })
    },
    editHandle(id) {
      this.$axios.get('/sys/thesis/info/' + id).then(res => {
        this.editForm = res.data.data
        this.showBtn = true;
        this.dialogVisible = true
      })
    },
    /*删除处理*/
    delHandle(id) {
      var ids = []
      if (id) {
        ids.push(id)
      } else {
        /*批量删除*/
        this.multipleSelection.forEach(row => {
          ids.push(row.id)
        })
      }
      console.log(ids)
      this.$axios.post("/sys/thesis/delete", ids).then(res => {
        this.$message({
          showClose: true,
          message: '删除成功',
          type: 'success'
        });
        this.getThesisList()
      })
    },
    /*处理勾选状态*/
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.delBtlStatu = val.length === 0
    },
    /*处理页面条数变化*/
    handleSizeChange(val) {
      /*console.log(`每页 ${val} 条`);*/
      this.size = val
      this.getThesisList()
    },
    /*处理当前页变化*/
    handleCurrentChange(val) {
      /*console.log(`当前页: ${val}`);*/
      this.current = val
      this.getThesisList()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.editForm = {};
    },
    handleClose() {
      this.resetForm('editForm')
      this.dialogVisible = false
    },
    submitForm() {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          let fd = new FormData();
          fd.append("number", this.editForm.number)
          if (this.editForm.id){
            /*修改*/
            fd.append("id", this.editForm.id)
          }
          if (this.editForm.title){
            fd.append("title", this.editForm.title)
          }
          if (this.editForm.authors){
            fd.append("authors", this.editForm.authors)
          }
          if (this.editForm.publishedTime){
            fd.append("publishedTime", this.editForm.publishedTime)
          }
          if (this.editForm.digest){
            fd.append("digest", this.editForm.digest)
          }
          if (this.editForm.body){
            fd.append("body", this.editForm.body)
          }
          if (this.editForm.citeNumber){
            fd.append("citeNumber", this.editForm.citeNumber)
          }
          if (this.editForm.collectNumber){
            fd.append("collectNumber", this.editForm.collectNumber)
          }
          if (this.editForm.noteNumber){
            fd.append("noteNumber", this.editForm.noteNumber)
          }
          this.saveOrUpdate(fd);
        } else {
          console.log('错误提交');
          return false;
        }
      })
    },
    saveOrUpdate(fd){
      this.$axios.post('/sys/thesis/' + (this.editForm.id?'update':'save'), fd , {
        headers: {'Content-Type': 'multipart/form-data'},//定义内容格式,很重要
        timeout: 20000,
      }).then(res => {
        this.$message({
          showClose: true,
          message: '操作成功',
          type: 'success'
        });
        this.getThesisList()
        this.resetForm('editForm')
        this.dialogVisible = false
      })
    }
  }
}
</script>


<style scoped>
.el-pagination {
  float: right;
  margin-top: 22px;
}
</style>
